<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>改变标题</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back" href="">
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class='title'>表单</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">原密码</div>
                                <div class="item-input">
                                    <input type="password" placeholder="原密码">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-password"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">新密码</div>
                                <div class="item-input">
                                    <input type="password" placeholder="新密码" class="">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" id="again" class="button button-big button-fill button-danger">重置</a></div>
                    <div class="col-50"><a href="#" id="post" class="button button-big button-fill button-success">修改</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<!--<script src="mbl/js/modifyPassword.js"></script>-->
<script>
    var POST_URL = "/modifPassword";

    window.onload=function(){
        ready();
    };

    var ready = function () {
        build();
    };

    var build = function () {
        again();
        post();
    };

    var again = function () {
        document.getElementById("again").onclick = function () {
            input = document.getElementsByTagName("input");
            for (i=0; i<input.length; i++)
                input[i].value = "";
        };
    };
    var post = function () {
        document.getElementById("post").onclick = function () {
            var input = document.getElementsByTagName("input");

            ajax({
                type:"POST",
                url:POST_URL,
                dataType:"json",
                data:{"o":input[0].value,"n":input[1].value},
                beforeSend:function(){
                },
                success:function(data){
                    if (data.code == 200){
                        $.toast('修改成功', 1000);
                        setTimeout(function () {
                            window.location.href = "/login.html";
                        },1000)
                    }else if (data.code == 205){
                        if (data.data == 2){
                            $.toast("密码错误", 1000);
                        }else {
                            $.toast("未知", 1000);
                        }

                    }
                },
                error:function(){
                    console.log("error")
                }
            })
        }
    };


    /*原生手写ajax*/
    function ajax(){
        var ajaxData = {
            type:arguments[0].type || "GET",
            url:arguments[0].url || "",
            async:arguments[0].async || "true",
            data:arguments[0].data || null,
            dataType:arguments[0].dataType || "text",
            contentType:arguments[0].contentType || "application/x-www-form-urlencoded",
            beforeSend:arguments[0].beforeSend || function(){},
            success:arguments[0].success || function(){},
            error:arguments[0].error || function(){}
        }
        ajaxData.beforeSend()
        var xhr = createxmlHttpRequest();
        xhr.responseType=ajaxData.dataType;
        xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
        xhr.setRequestHeader("Content-Type",ajaxData.contentType);
        xhr.send(convertData(ajaxData.data));
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if(xhr.status == 200){
                    ajaxData.success(xhr.response)
                }else{
                    ajaxData.error()
                }
            }
        }
    }

    function createxmlHttpRequest() {
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
    }

    function convertData(data){
        if( typeof data === 'object' ){
            var convertResult = "" ;
            for(var c in data){
                convertResult+= c + "=" + data[c] + "&";
            }
            convertResult=convertResult.substring(0,convertResult.length-1)
            return convertResult;
        }else{
            return data;
        }
    }
</script>